<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
  <script src="./data.js"></script>
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" checked="false" id="inputone" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>

    let renderDom = data => {
      let lists = document.querySelector('#list');
      // 清空静态页面
      lists.innerHTML = '';

      // 动态渲染页面
      data.forEach((item, index) => {
        // 初始化页面
        let liEl = document.createElement('li');// 创建节点
        liEl.innerHTML = `
               <input type="checkbox" ${item.checked ? 'checked' : ''}  id = "inputone" />
               <span>${item.title}</span>
               ` ;
        lists.append(liEl);

        // collect  为true 就渲染已经收藏标签  为false 就渲染 收藏标签

        if (item.collect) {

          let cancelCollect = document.createElement('a'); // 创建节点
          cancelCollect.setAttribute('href', 'javascript:;');
          cancelCollect.setAttribute('class', 'cancelCollect');
          cancelCollect.setAttribute('id', index);
          cancelCollect.innerText = '取消收藏 ';

          liEl.append(cancelCollect); // 添加取消收藏标签

        } else {

          let collect = document.createElement('a'); // 创建节点
          collect.setAttribute('href', 'javascript:;');
          collect.setAttribute('class', 'collect');
          collect.setAttribute('id', index);
          collect.innerText = '收藏 ';

          liEl.append(collect); // 添加收藏标签

        }



        // 删除内容
        let removeEl = document.createElement('a'); // 创建节点
        removeEl.setAttribute('href', 'javascript:;');
        removeEl.setAttribute('class', 'remove');
        removeEl.setAttribute('id', index);
        removeEl.innerText = ' 删除';
        removeEl.onclick = (e) => {
          // 改变数据
          let idx = removeEl.getAttribute('id');
          // console.log(idx);
          data.splice(idx, 1); // 数组删除成员,从下标为idx的位置开始,删除1个
          // console.log(data);
          // 重新渲染
          renderDom(data);
        };

        liEl.append(removeEl); // 添加删除标签


        // 添加内容

        let add = document.querySelector('#add'); // 添加按钮
        let newInfo = document.querySelector('#newInfo'); // input

        add.onclick = (e) => {
          // 获取文本框的内容
          let text = newInfo.value;
          // 获取数组最后一项的下标
          let length = data.length - 1;
          // 修改数据
          data.push({
            id: length++,
            title: text,
            checked: false, // 是否默认选中
            collect: false //是否收藏 true 收藏 false 没有收藏
          })
          // 重新渲染
          renderDom(data)
          // 清空文本框
          newInfo.value = '';
          // console.log(data);
        }


        // 点击收藏  取消收藏显示
        let collect = document.querySelectorAll('.collect'); // 添加按钮
        // console.log(collect);

        collect.forEach((item, index) => {
          item.onclick = (e) => {
            let collectId = item.getAttribute('id')
            // console.log(item.getAttribute('id'))
            // 修改数据
            data[collectId].collect = true;
            renderDom(data);
          }
        })

        // 点击取消收藏  收藏显示
        let cancelCollect = document.querySelectorAll('.cancelCollect'); // 添加按钮
        cancelCollect.forEach((item, index) => {
          item.onclick = (e) => {
            let cancelCollectId = item.getAttribute('id')
            // console.log(item.getAttribute('id'))
            // 修改数据
            data[cancelCollectId].collect = false;
            renderDom(data);
          }
        })


        // 全选全不选
        let checkAll = document.querySelector('#checkAll');
        checkAll.onclick = () => {
          // console.log(checkAll.checked);
          if (checkAll.checked) {  // 判断全选矿的checked状态
            // 修改数据的值
            data.forEach((item) => {
              item.checked = true;
            })
          } else {
            data.forEach((item) => {
              item.checked = false;
            })
          }
          renderDom(data)
        }



        // 删除选中的内容
        let removeOpt = document.querySelector('.footer #remove');
        // 点击事件
        removeOpt.onclick = () => {
          // let data1 = JSON.parse(JSON.stringify(data))
          // console.log(data1);
          let data2 = data.filter((item) => item.checked === false)
          // console.log(data2);
          if (data2.length === 0) {
            checkAll.checked = false;
            data = [];
          }
          renderDom(data2)
        }

        // 内容input选中
        let inputone = document.querySelectorAll('#inputone');
        // console.log(inputone);
        inputone[index].onclick = () => {
          // 获取内容区input的选中值
          if (inputone[index].checked) {
            item.checked = inputone[index].checked;
            let flag = data.every((item) => item.checked === true )
            // console.log(flag);
            if (flag) {
              checkAll.checked = true;
            }else{
              checkAll.checked = false;
            }
          } else {
            item.checked = inputone[index].checked;
          }
        }
      });
    }
    renderDom(data);


  </script>
</body>

</html>